{% block sw_bulk_edit_product_visibility %}
<div class="sw-bulk-edit-product-visibility">
    {% block sw_bulk_edit_product_visibility_select %}
    <sw-inherit-wrapper
        ref="productVisibilitiesInheritance"
        v-model:value="product.visibilities"
        :inherited-value="product.visibilities"
        class="sw-product-category-form__visibility_field"
        :custom-remove-inheritance-function="visibilitiesRemoveInheritanceFunction"
        is-association
    >
        <template #content="{ currentValue, isInherited, updateCurrentValue }">
            <sw-product-visibility-select
                ref="productVisibility"
                :key="isInherited"
                class="sw-product-detail__select-visibility"
                :entity-collection="currentValue"
                :placeholder="$tc('sw-product.visibility.placeholderVisibility')"
                :disabled="disabled || undefined"
                @update:entity-collection="updateCurrentValue"
            />
        </template>
    </sw-inherit-wrapper>
    {% endblock %}

    {% block sw_bulk_edit_product_visibility_advanced %}
    <sw-container
        v-if="product.visibilities.length > 0"
        columns="1fr"
        justify="end"
    >
        <a
            class="sw-card__quick-link advanced-visibility"
            :class="{ 'is--disabled': disabled }"
            role="button"
            tabindex="0"
            @click="openModal"
            @keydown.enter="openModal"
        >
            {{ $tc('sw-product.visibility.linkAdvancedVisibility') }}
            <mt-icon
                name="regular-long-arrow-right"
                size="16px"
            />
        </a>
    </sw-container>
    {% endblock %}

    {% block sw_bulk_edit_product_visibility_advanced_modal %}
    <sw-modal
        v-if="displayVisibilityDetail"
        :title="$tc('sw-product.visibility.textHeadline')"
        class="sw-product-category-form__visibility_modal"
        variant="large"
        @modal-close="closeModal"
    >
        <p>{{ $tc('sw-product.visibility.visibilityModalDescription') }}</p>

        <sw-product-visibility-detail />

        <template #modal-footer>
            <mt-button
                variant="primary"
                size="small"
                @click="closeModal"
            >
                {{ $tc('global.default.apply') }}
            </mt-button>
        </template>
    </sw-modal>
    {% endblock %}
</div>
{% endblock %}
